<%--
  Created by IntelliJ IDEA.
  User: nihaowzy
  Date: 2020/12/22
  Time: 20:42
  
--%>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/layui/css/layui.css">
</head>
<body>
<form class="layui-form layui-form-pane">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">
                用户名
            </label>
            <div class="layui-input-inline" style="width: 120px">
                <input type="text" class="layui-input" id="username" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">
                姓名
            </label>
            <div class="layui-input-inline" style="width: 120px">
                <input type="text" class="layui-input" id="realname" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">
                角色
            </label>
            <div class="layui-input-inline" style="width: 120px">
                <select id="role">
                    <option value="">角色</option>
                    <option value="1">管理员</option>
                    <option value="2">业务员</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">
                状态
            </label>
            <div class="layui-input-inline" style="width: 120px">
                <select id="deleted">
                    <option value="">状态</option>
                    <option value="1">在职</option>
                    <option value="2">离职</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" id="searchBtn" type="button">查询</button>
            <button class="layui-btn layui-btn-primary" type="reset">重置</button>
        </div>
    </div>
</form>
<hr/>
<table  class="layui-table" id="dataTable" lay-filter="dataTableFilter"></table>
<%-- 头工具栏 --%>
<script type="text/html" id="headerBtns">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" lay-event="add" >
            <i class="layui-icon layui-icon-add-1"></i>
            添加员工
        </button>
    </div>
</script>
<%-- 行工具栏 --%>
<script type="text/html" id="rowBtns">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="resetPwd">
            <i class="layui-icon layui-icon-refresh-3"></i>
            重置密码
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            离职
        </button>
    </div>
</script>
<%--新增员工弹窗--%>
<script type="text/html" id="addUser">
    <form  class="layui-form layui-form-pane" lay-filter="addUserFilter">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input class="layui-input" name="realname" type="text" placeholder="员工姓名" autocomplete="off" lay-verify="required" lay-reqText="员工姓名不能为空" />
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input class="layui-input" name="username" type="text" placeholder="用户名" autocomplete="off" lay-verify="required" lay-reqText="用户名不能为空" />
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline"  >
                    <input class="layui-input" name="password" type="text" value="123456" readonly />
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline" style="width: 210px">
                <input type="radio" name="role" title="业务员"  value="2" checked/>
                <input type="radio" name="role" title="管理员"  value="1" />
            </div>
        </div>
        <button style="display: none" type="button" id="subBtn" lay-submit lay-filter="subBtnFilter"></button>
    </form>
</script>

<script src="${pageContext.request.contextPath}/resource/layui/layui.js"></script>
<script>
    layui.use(['form','jquery','table','layer'],function () {
        let form = layui.form;
        let $ = layui.jquery;
        let table = layui.table;
        let layer = layui.layer;
        //项目根目录
        let rootPath = "${pageContext.request.contextPath}";
        let optTab = {
            id:"dataTableId",
            elem:"#dataTable",
            page:true,
            url:rootPath+"/user.do?service=page",//后端传入的接口
            toolbar:"#headerBtns",
            cols:[[
                {type:"checkbox",fixed:"left"},
                {title:"用户名",field:"username"},
                {title:"真实姓名",field:"realname"},
                {title:"角色",field:"role",templet:function (d) {
                    let role = d.role;
                    if (role == 1){
                        return "<b style='color: #00F7DE'>管理员</b>"
                    }else if (role == 2){
                        return "<b style='color: orange'>业务员</b>"
                    }
                    }},
                {title: "状态(是否离职)",field:"deleted",templet:function (d) {
                        let deleted = d.deleted;
                    if (deleted == 1){
                        return "<b style='color: #00F7DE'>在职</b>"
                    }else if (deleted == 2){
                        return "<b style='color: orange'>离职</b>"
                    }
                    } },
                {title: "图像",field: "img", event:"showImg",templet:function (d) {
                    return "<button class='layui-btn layui-btn-xs'>查看</button>"
                    }},
                {title:"创建时间",field:"createTime"},
                {title:"离职时间",field:"deletedTime"},
                {title:"操作",toolbar:"#rowBtns"},
            ]],
            parseData:function (rs) {
                console.log(rs)
                return{
                    code:rs.code,
                    msg:rs.msg,
                    count:rs.data.count,
                    data:rs.data.data,
                }
            },
            response:{
                statusCode:200
            }
        };
        let tabIns = table.render(optTab);
        //查询数据
        $("#searchBtn").click(function () {
            let username = $("#username").val();
            let realname = $("#realname").val();
            let role = $("#role").val();
            let deleted = $("#deleted").val();
            tabIns.reload({
                where:{
                    username:username,
                    realname:realname,
                    role:role,
                    deleted:deleted
                }
            });
        });
        //表格行工具栏监听事件
        table.on("tool(dataTableFilter)",function (d) {
           // console.log(d.data);
            let event = d.event;
            let rowData = d.data;//获取这一行的数据
            //行工具栏的点击按钮事件分发
            if (event == "resetPwd"){
                restPwd(rowData);
            }else if (event == "del"){
                 del(rowData);
            }else if (event == "showImg"){
                 showImg(rowData);
            }
        });
        //重置密码
        function restPwd(rowData) {
            let id = rowData.id;//用户id\
            console.log(id)
            layer.confirm("确定要重置密码吗",function (index) {
                $.get(rootPath+"/user.do?service=resetPwd",{"id":id},function (rs) {
                    //console.log(rs)
                    //将业务消息展示
                    layer.msg(rs.msg)
                    //如果业务码不等于200
                    if (rs.code != 200){
                        return;
                    }
                    //刷新表格
                    $("#searchBtn").click();
                });
            });
        };
        //员工离职
        function del(rowData) {
            //console.log(rowData.deleted);
            //校验员工是否离职
            if (rowData.deleted == 2){
                layer.msg("该员工已经离职");
                return false;
            }
            layer.confirm("确定该员工离职吗?",function (index) {
                $.get(rootPath+"/user.do?service=deleted",{"id":rowData.id},function (rs) {
                    layer.msg(rs.msg);
                    if (rs.code != 200){
                        return;
                    }
                    //刷新表格
                    $("#searchBtn").click();
                });
            });
        };
        //展示头像
        function showImg(rowData) {
            let img = rowData.img;
            console.log("img"+img)
            if (!img){
                layer.msg("该员工没有头像");
                return;
            }

            let photoOpt ={
                "title": "员工头像", //相册标题
                "start": 0, //初始显示的图片序号，默认0
                "data": [   //相册包含的图片，数组格式
                    {
                        "alt": "头像",
                        "pid": 666, //图片id
                        "src": rootPath+"/"+img, //原图地址
                    }
                ]
            }
            layer.photos({
                photos: photoOpt
                ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            });
        };
        //表格头工具栏监听事件
        table.on("toolbar(dataTableFilter)",function (d) {
            let event = d.event;
            console.log("event"+event);
            if (event == "add"){
                add();
            };
        });
        //新增员工弹窗
        function add(){
            let addOpt = {
                title:"新增员工信息",
                elem: "#addUser",
                btn:["确认","取消"],
                area:['360px','390px'],
                btnAlign:'c',
                type:1,
                content: $("#addUser").html(),
                success:function (layero,index) {
                    //表单渲染
                    form.render();
                    //绑定提交事件
                    form.on("submit(subBtnFilter)",function (d) {
                        let formData = d.field;
                        console.log(formData);
                        $.post(rootPath+"/user.do?service=add",formData,function (rs) {
                            layer.msg(rs.msg);
                            if (rs.code  != 200){
                                return false;
                            }
                            layer.close(index);
                            $("#searchBtn").click();
                        });
                    });
                },
                yes:function (index,layero) {
                    $("#subBtn").click();
                }
            };
            layer.open(addOpt)
        }

    });
</script>
</body>
</html>
